<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Pagination</title>
    <style>
        .table-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
        }

        #data-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        #data-table th, #data-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        #data-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .pagination {
            display: flex;            
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
        }

        .pagination button {
            padding: 8px 16px;
            border: 1px solid #ddd;
            background-color: white;
            cursor: pointer;
            border-radius: 4px;
        }

        .pagination button:hover:not(.active) {
            background-color: #f2f2f2;
        }

        .pagination button.active {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }
        #page-numbers{
            display: flex;
        }

        .page-number {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }

        .page-number:hover:not(.active) {
            background-color: #f2f2f2;
        }

        .page-number.active {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table id="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody id="table-body">
                <!-- Table body will be populated by JavaScript -->
            </tbody>
        </table>

        <div class="pagination" id="pagination">
            <button id="prev-btn">Previous</button>
            <div id="page-numbers"></div>
            <button id="next-btn">Next</button>
        </div>
    </div>

    <script>
        // Sample data - replace with your actual data
        const tableData = Array.from({length: 50}, (_, i) => ({
            id: i + 1,
            name: `User ${i + 1}`,
            email: `user${i + 1}@example.com`,
            status: i % 3 === 0 ? 'Active' : i % 3 === 1 ? 'Inactive' : 'Pending'
        }));

        // Pagination configuration
        const rowsPerPage = 5;
        let currentPage = 1;

        // DOM Elements
        const tableBody = document.getElementById('table-body');
        const pagination = document.getElementById('pagination');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const pageNumbers = document.getElementById('page-numbers');

        // Display table rows for current page
        function displayTable(page) {
            tableBody.innerHTML = '';
            const startIndex = (page - 1) * rowsPerPage;
            const endIndex = Math.min(startIndex + rowsPerPage, tableData.length);
            const paginatedData = tableData.slice(startIndex, endIndex);

            paginatedData.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.email}</td>
                    <td>${item.status}</td>
                `;
                tableBody.appendChild(row);
            });
        }

        // Update pagination buttons
        function updatePagination() {
            pageNumbers.innerHTML = '';
            const totalPages = Math.ceil(tableData.length / rowsPerPage);

            // Show up to 5 page numbers
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, startPage + 4);

            if (endPage - startPage < 4 && totalPages > 5) {
                if (startPage === 1) {
                    endPage = 5;
                } else if (endPage === totalPages) {
                    startPage = Math.max(1, totalPages - 4);
                }
            }

            // Add first page button if needed
            if (startPage > 1) {
                addPageButton(1);
                if (startPage > 2) addEllipsis();
            }

            // Add page number buttons
            for (let i = startPage; i <= endPage; i++) {
                addPageButton(i);
            }

            // Add last page button if needed
            if (endPage < totalPages) {
                if (endPage < totalPages - 1) addEllipsis();
                addPageButton(totalPages);
            }

            // Update prev/next button states
            prevBtn.disabled = currentPage === 1;
            nextBtn.disabled = currentPage === totalPages;
        }

        // Add page button to pagination
        function addPageButton(pageNum) {
            const button = document.createElement('div');
            button.textContent = pageNum;
            button.classList.add('page-number');
            if (pageNum === currentPage) {
                button.classList.add('active');
            }
            button.addEventListener('click', () => {
                currentPage = pageNum;
                displayTable(currentPage);
                updatePagination();
            });
            pageNumbers.appendChild(button);
        }

        // Add ellipsis to pagination
        function addEllipsis() {
            const ellipsis = document.createElement('div');
            ellipsis.textContent = '...';
            ellipsis.classList.add('page-number');
            ellipsis.style.cursor = 'default';
            ellipsis.style.color = '#999';
            pageNumbers.appendChild(ellipsis);
        }

        // Event listeners
        prevBtn.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                displayTable(currentPage);
                updatePagination();
            }
        });

        nextBtn.addEventListener('click', () => {
            const totalPages = Math.ceil(tableData.length / rowsPerPage);
            if (currentPage < totalPages) {
                currentPage++;
                displayTable(currentPage);
                updatePagination();
            }
        });

        // Initialize
        displayTable(currentPage);
        updatePagination();
    </script>
</body>
</html>